<template>
  <div class="mall">
    <!-- 头部 -->
    <div class="mall-header">商品分类</div>
    <!-- 搜索框 -->
    <div class="search">
      <Search />
    </div>
    <!-- 内容 -->
    <!-- 侧边栏  商品列表-->
    <SideBar :sidebarlist="sidebarlist" class="list" />
    <!-- 底部导航栏 -->
    <Bottom class="footer" />
  </div>
</template>

<script>
import SideBar from "@/views/mall/child/SideBar.vue";
import Bottom from "@/components/home/Buttom.vue";
import Search from "@/components/home/Search.vue";
import { SidebarApi } from "@/request/api";
export default {
  data() {
    return {
      // 侧边栏
      sidebarlist: [],
    };
  },
  components: {
    SideBar,
    Bottom,
    Search,
  },
  created() {
    // 侧边栏
    SidebarApi().then((res) => {
      if (res.data.code === 200) {
        this.sidebarlist = res.data.data;
        console.log(this.sidebarlist);
      }
    });
  },
  methods: {},
};
</script>
 
<style lang = "less" scoped>
.mall-header {
  height: 8vw;
  line-height: 8vw;
  text-align: center;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>